<template>
  <div>
    <!-- class 相关样式操作演示 -->
    <div class="box1">
      <p class="red bold">测试class属性1</p>
      <p :class="'red'">测试class属性2</p>
      <p :class="['red', 'bold']">测试class属性3</p>
      <p :class="['red', 'bold', flag?'active':'']">测试class属性4</p>
      <p :class="['red', 'bold', {active:flag}]">测试class属性5</p>
      <p :class="classObj">测试class属性6</p>
    </div>
    <!-- 样式操作 - 2.style操作 -->
    <div class="box2">
      <p>测试style属性</p>
      <p style="background-color:lightpink;color:blue">测试style属性1</p>
      <p :style="{backgroundColor: 'lightblue', color: 'yellow'}">测试style属性2</p>
      <!-- 单个单词可以直接写，带下划线的两个单词拼接的要用引号 -->
       <p :style="{'background-color': 'lightblue', color: 'yellow'}">测试style属性3</p>
        <p :style="styleObj">测试style属性4</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      classObj: {
        red: false,
        bold: true,
        active: true
      },
      //后面的值必须加引号
      styleObj:{
        backgroundColor: 'red', 
      color: 'black'
      }
    }
  }
}
</script>

<style scoped>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
.active {
  background-color: yellow;
} 
.box1, .box2 {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
}

</style>